import React from 'react'
import Input from 'antd-mobile/lib/input-item'
import List from 'antd-mobile/lib/List'
import styles from './style.css'
import Toast from 'antd-mobile/lib/Toast'
import Calendar from 'antd-mobile/lib/Calendar'
import DatePicker from 'antd-mobile/lib/date-picker'
import 'antd-mobile/lib/date-picker/style/index'
import {exp_num, exp_phone} from '../../util/regs'
import {trampToDate} from "../../util/date";

class From1 extends React.Component {
    constructor() {
        super();
        this.state = {
            input1: "",
            hasError1: false,
            input2: "",
            hasError2: false,
            visible_ymr: false,
            visible_ymr1: false,
            time_ymr: new Date(),
            time_ymr1: new Date(),
        }
    }

    onErrorClick1() {
        if (this.state.hasError1) {
            Toast.info('请输入手机格式');
        }
    }

    onChange(value) {
        if (!exp_phone.test(value)) {
            this.setState({hasError1: true})
        } else {
            this.setState({hasError1: false})
        }
        this.setState({input1: value})
    }

    onErrorClick2() {
        if (this.state.hasError2) {
            Toast.info('请输入数字格式');
        }
    }

    onChange2(value) {
        if (!exp_num.test(value)) {
            this.setState({hasError2: true})
        } else {
            this.setState({hasError2: false})
        }
        this.setState({input2: value})
    }

    showCalendar_ymr() {
        this.setState({visible_ymr: true})
    }

    onCancelCalendar1() {
        this.setState({visible_ymr: false})
    }

    onSelectCalendar1(date) {
        this.setState({time_ymr: date})
    }

    onConfirmCalendar1() {
        this.setState({visible_ymr: false})
    }

    showCalendar_ymr1() {
        this.setState({visible_ymr1: true})
    }

    onConfirmCalendar2(value) {
        this.setState({time_ymr1: value, visible_ymr1: false})
    }

    render() {
        return <div>
            <List className={styles.List}
                  renderHeader={() => <p>普通标题</p>}
            >
                <Input>普通标题</Input>
            </List>
            <List className={styles.List}
                  renderHeader={() => <p>验证表单</p>}
            >
                <Input
                    value={this.state.input1}
                    error={this.state.hasError1}
                    onErrorClick={this.onErrorClick1.bind(this)}
                    onChange={this.onChange.bind(this)}
                >验证-手机</Input>
                <Input
                    value={this.state.input2}
                    error={this.state.hasError2}
                    onErrorClick={this.onErrorClick2.bind(this)}
                    onChange={this.onChange2.bind(this)}
                >验证-数字</Input>
                <Input
                    type={"money"}
                    value={this.state.input2}
                    error={this.state.hasError2}
                    onErrorClick={this.onErrorClick2.bind(this)}
                    onChange={this.onChange2.bind(this)}
                >验证-数字键盘</Input>
                <Input
                    type={"password"}
                    value={this.state.input2}
                    error={this.state.hasError2}
                    onErrorClick={this.onErrorClick2.bind(this)}
                    onChange={this.onChange2.bind(this)}
                >验证-密码</Input>
                <List.Item
                    arrow={"horizontal"}
                    onClick={this.showCalendar_ymr.bind(this)}
                >
                    年月日: {trampToDate({date: this.state.time_ymr})}
                </List.Item>
                <Calendar
                    type={"one"}
                    onSelect={this.onSelectCalendar1.bind(this)}
                    defaultValue={[this.state.time_ymr]}
                    defaultDate={this.state.time_ymr}
                    onConfirm={this.onConfirmCalendar1.bind(this)}
                    onCancel={this.onCancelCalendar1.bind(this)}
                    visible={this.state.visible_ymr}
                />
                <List.Item
                    arrow={"horizontal"}
                    onClick={this.showCalendar_ymr1.bind(this)}
                >
                    年月日2: {trampToDate({date: this.state.time_ymr1})}
                </List.Item>
                <DatePicker
                    mode={'date'}
                    onOk={this.onConfirmCalendar2.bind(this)}
                    visible={this.state.visible_ymr1}
                ></DatePicker>
            </List>
        </div>
    }
}

export default From1;